<template>
    <div class="header ">
        <div class="container">
          <ul class="headerlist">
          <li  v-if="this.$store.state.login.token">demo</li>
          <li @click="goLogin" v-if="this.$store.state.login.token">退出登录</li>
          <li @click="goLogin" v-else>请先登录</li>
          <li>免费注册</li>
          <li @click="goDingdan">我的订单</li>
          <li>会员中心</li>
          <li>帮助中心</li>
          <li>关于我们</li>
          <li>手机版</li>
        </ul>
        </div>
    </div>
  </template>
  
  <script >
  // import {mapState} from "vuex"
    export default{
        methods:{
          goLogin(){
            this.$router.push({
              path:"/login"
            })
          },
          goDingdan(){
            this.$router.push({
              path:"/personal"
            })
          }
        },
        computed:{
          // ...mapState(['token']),
        }

   }
  </script>
  
  <style lang="scss" scoped>
  .header {
    height: 50px;
    width: 100%;
    background-color: #333333;
     display: flex;
     justify-content: right;
     align-items: center;
     .headerlist{
      display:flex;
      justify-content: right;
      align-items: center;
      li{
        padding: 0 15px;
        color: #cdcdcd;
        i{
          display: inline-block;
          width: 14px;
          height: 14px;
          color: #cdcdcd;
        }
      }
      li:not(li:nth-last-child(1)){
        border-right: 1px solid #cdcdcd;
      }
      li:hover{
        color: #1dc779;
      }
     }
  }
  </style>